<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .blue {
      color:  blue;
    }
    .red {
      color:  red;
    }
    .bold{
      font-weight: 800;
      font-size: 40px;
    }
    .bold2{
      font-weight: 500;
      font-size: 30px;
    }
  </style>
</head>

<body>


<div id="app" style="background-color: aquamarine">
  <a v-bind:href="toutiao">今日头条(v-bind:herf)</a>
  <br>
  <a :href="toutiao">今日头条(语法糖)</a>
</div>

<div id="app2">
  <h2 v-bind:class="getH2Class()">{{message}}</h2>
  <button @click="changeColor">换颜色</button>
</div>

<div id="app3">
  <div :class="cssArray">{{message}}</div>
  <br>
  <button @click="changeColor">换颜色</button>
  <br>
  <button @click="changeFont">换字体大小</button>
</div>

<div id="app4">
  <h2 :style="{'color': 'red', 'font-size': fontSize + 'px'}">这是一个红色的H2</h2>
  <button @click="addFontSize">增大字号</button>
  <h2 :style="[style1, style2]">这是一个蓝色的斜体的h2</h2>
</div>

<!--从CDN引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      toutiao: 'http://www.toutiao.com'
    }
  });

  new Vue({
    el: '#app2',
    data: {
      message: '你好，VUE',
      isBlue: true,
      isRed: false
    },
    methods:{
      getH2Class(){
        return {blue: this.isBlue, red: this.isRed}
      },
      changeColor(){
        this.isBlue = !this.isBlue
        this.isRed = !this.isRed
      }
    }
  });

  new Vue({
    el: '#app3',
    data: {
      message: '你好，VUE',
      cssArray: ['bold','blue']//默认是蓝色
    },
    methods: {
      changeColor(){
        if(this.cssArray[1] !== 'blue'){
          this.cssArray.pop();
          this.cssArray.push('blue');
          //this.cssArray[1]='blue' 这种写法不是响应式的，数据发生变化，但页面显示的颜色不会变
        }else{
          this.cssArray.pop();
          this.cssArray.push('red');
        }
      },
      changeFont(){
        if(this.cssArray[0] !== 'bold'){
          this.cssArray.shift();
          this.cssArray.unshift('bold');
          //this.cssArray[1]='blue' 这种写法不是响应式的，数据发生变化，但页面显示的颜色不会变
        }else{
          this.cssArray.shift();
          this.cssArray.unshift('bold2');
        }
      }
    }
  });

  new Vue({
    el: '#app4',
    data: {
      fontSize: 30,
      style1: { 'color': 'blue', 'font-size': '40px', 'font-weight': '200' },
      style2: { 'font-style': 'italic' }
    },
    methods: {
      addFontSize(){
        this.fontSize ++
        }
    }
  });

</script>
</body>
</html>